<template>
  <div class="tree">
    <div class="tree-content" >
      <el-tree
        :data="layerData"
        show-checkbox
        node-key="kbId"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]"
        :props="defaultProps"
        @check-change="handleCheckChange"
        @node-click="handleRowClick"
      >
      </el-tree>
    </div>
    <div id="infoboxtree" v-show="showinfotree">
          <div v-for="(key,index) of Object.keys(inconInfo)" :key="index" class="infoboxcontent">
              <span class="content-label">{{ key + '：' }}</span>
					    <span class="content-value">{{ inconInfo[key] }}</span>
          </div>
          <!-- <span>
            ahurlevpomqe
          </span> -->
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { get } from "../../../util/request";
import LayerManager from '../../../cesiumPlugin/layerManager';
import doc from "../naturalData";
export default {
  data() {
    return {
      num: 0,
      inconInfo:{},
      layerData:[],
      model:[],
      showinfotree:false,
      defaultProps: {
        children: "children",
        label: "label",
      },
    }
  },
  mounted() {
    this.initTree()
    this.iconClick()
  },
  methods: {
     addBoundInfoBox(positionValue, elementId) {
            const oneDiv = document.getElementById(elementId);
            oneDiv.style.display = "block";
            console.log(elementId)
            let preRenderListener = viewer.scene.preRender.addEventListener(
                function () {
                    let elWidth = oneDiv.offsetWidth;
                    let elHeight = oneDiv.offsetHeight; // + 60
                    const scratch = new Cesium.Cartesian2(); //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
                    let position = positionValue;
                    const canvasPosition =
                        viewer.scene.cartesianToCanvasCoordinates(
                            position,
                            scratch
                        ); //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标

                    if (Cesium.defined(canvasPosition)) {
                        // 根据元素宽高及当前点屏幕坐标进行偏移
                        oneDiv.style.top =
                            canvasPosition.y - elHeight * 1 + "px";
                        oneDiv.style.left =
                            canvasPosition.x - elWidth / 2 + "px";
                        oneDiv.style.position="absolute"
                    }
                }
            );
        },
    iconClick(){
      let baseurl = window.loginUrl;
      var handlerVideo = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
	    let that = this
		  handlerVideo.setInputAction((movement) => {
      console.log(viewer._selectedEntity)
			if (viewer._selectedEntity) {
        axios({
			     	url: `${baseurl}/api/v2/detail/getNaturalDisastersDetail`,
			     	method: 'get',
            params:{
                kbId:viewer._selectedEntity._datakbId,
                dataId:viewer._selectedEntity._data.id
            }
			     }).then((res) => {
              if(res.status == 200){
                // console.log(res.data)
                 that.showinfotree = true
                 let vData = res.data.data
                 let dic = doc[viewer._selectedEntity._dataType];
                //  console.lgo(dic)

                 for(let key in dic){
                    that.inconInfo[dic[key]] = vData[key];
                }
                that.showinfotree = true
                // console.log(that.inconInfo)
                // that.addBoundInfoBox(viewer._selectedEntity._position._value,"infoboxtree")
                // console.log(that.inconInfo)/
            }
			})
			}
		}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    },
    initTree(){
       let baseurl = window.loginUrl;
       let that = this
       axios({
			     	url: `${baseurl}/api/tree/getRootTree`,
			     	method: 'get',
                    params:{
                       ids:"11"
                    }
			     }).then((res) => {
                     if(res.status == 200){
                       that.layerData = res.data
                }
			})
    },
    handleRowClick(data, node) {
      node.checked = !(node.checked)
    },
    handleCheckChange(data, checked){
       let baseurl = window.loginUrl;
      // console.log(data)
      // if(data.kbApiDownload == null){
        if(checked){
        let that = this
        get(`${baseurl}${data.kbApiAll}`).then((res=>{
          if(res.code == 200){
            // console.log(data)
               that.dataToviewer(res.data,`/data/images/icon/${data.label}.png`,data.label,data.kbId)
              }
          }))
        }else {
          // console.log(viewer)
          //  this.entity.remove(this.model[0])
          // console.log(this.model)
          for(var i = 0;i<this.model.length;i++){
            if(this.model[i]._dataType && this.model[i]._dataType == data.label){
              // viewer.remove(this.model[i])
              // console.log(this.model[i])
               viewer.entities.remove(this.model[i])
            }
          }
        }
      // }
    },
    dataToviewer(data, img,type,kbId) {
      for (var i = 0; i < data.length; i++) {
            // console.log(data[i])
            if(data[i].sfkx == null || data[i].sfkx == "是"){
              // console.log(data[i])
          this.entity = viewer.entities.add({
					// name: this.fireDataList[i].city + this.fireDataList[i].county,
					ID: data.ID,
					cursor: true,
					data: data[i],
          datakbId:kbId,
					dataType:type,
					position: Cesium.Cartesian3.fromDegrees(data[i].lng, parseFloat(data[i].lat)),
					billboard: {
						image: img,
						verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
						horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //
						width: 20,
						height: 25,
					},
					// label: {
					// 	text: data[i].F_jgqc,
					// 	font: '15px sans-serif',
					// 	fillColor: Cesium.Color.fromCssColorString('#d1d000'),
					// 	horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
					// 	pixelOffset: new Cesium.Cartesian2(0.0, 5),
					// 	pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.5e2, 3.0, 1.5e7, 0.5),
					// 	distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 10000),
					// },
				})
         
        //  console.log(this.model)
      }
      this.model.push(this.entity)
      }
		},
  },
  beforeUnmount(){
  }  
};
</script>
<style lang="stylus"></style>
<style lang="stylus" scoped>
@import '../../../assets/varibles.styl';
.tree {
  .tree-title {
    width: vw(40);
    height: vh(40);
    background: rgb(23, 31, 39);
  }
  .tree-content {
    width: vw(200);
    position: absolute;
    top: vh(0);
    right: vw(40);
  }
  // #infoboxtree{
  //   width:vw(320);
  //   height: vh(300);
  //    background:pink;
  //    top:200px
  // }
 #infoboxtree{
            width:vw(320);
            height: vh(300);
            overflow-x:hidden;
            overflow-y:hidden;
            overflow:auto;
            height: vh(40);
            positon:absolute;
            top: vh(400);
            left:vw(320);
            // top:100px;
            // height:100px;
            background:rgba(0,13,22,0.7);
            border:1px solid #029e9e;
            border-top:3px solid #0ffcfc;
            border-bottom:3px solid #0ffcfc;
            /deep/ ::-webkit-scrollbar{
            width:14px;
            // background-color: pink;
          }
            /deep/ ::-webkit-scrollbar-thumb{
            background-color: blue;
          }
            .infoboxcontent{
                padding:vh(10) vw(10);
                box-sizing:border-box;
               .content1{
                    width:100%;
                    height: vh(30);
                    border-bottom:1px solid #ffffff;
                    text-align:center;
                    font-weight:bold;
                    color:#19F1F9;
                }
                .el-icon-close{
                    float:right;
                    cursor:pointer;
                }
            }
            
        }
}

/deep/ .el-tree {
  width: 100%;
  height: calc(100% - 50px);
  font-size: 0.18rem;
  margin: 0.2rem 0;
  background: none;
  color: #fff;
  // position: relative;
  overflow: auto;

  .el-checkbox__inner {
    border-radius: 0 !important;
    background: none;
    margin: 0 15px 0 5px;
  }
}

/deep/ .el-tree .el-tree-node__content {
  background: rgba(16, 34, 67, 0.5);
  height: 30px;
  margin-bottom: 5px;

  .is-disabled + span {
    color: #fff;
  }

  /deep/ .custom-tree-node {
    position: relative;
    width: calc(100% - 70px);
    overflow: hidden;

    .txt {
      display: inline-block;
      width: 75%;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }

    .btns {
      width: 20%;

      /deep/ .el-button {
        padding: 2px;
      }

      img {
        vertical-align: middle;
        width: 24px;
        height: 24px;
      }
    }
  }
}

/deep/ .el-tree .is-disabled + span {
  color: #fff;
}

/deep/ .el-tree .el-tree-node__content:hover {
  background-color: #b67d10;
}

/deep/ .el-tree .el-tree-node:focus > .el-tree-node__content {
  background-color: #b67d10;
}

/deep/ .el-tree .el-menu-item:focus, /deep/ .el-tree .el-menu-item:hover {
  background: none !important;
}

/deep/ .el-tree .el-menu-item * {
  vertical-align: baseline !important;
}

/deep/ .el-tree .el-tooltip {
  padding: 0 !important;
}

/deep/ .el-tree .custom-tree-node:hover .tool {
  display: inline-block;
  /* visibility: visible; */
}

/deep/ ::-webkit-scrollbar {
  /* 滚动条整体样式 */
  width: 4px;
  /* 高宽分别对应横竖滚动条的尺寸 */
  height: 0;
}

/deep/ ::-webkit-scrollbar-thumb {
  /* 滚动条里面小方块 */
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #2fd5ff;
  scrollbar-arrow-color: red;
}

/deep/ ::-webkit-scrollbar-track {
  /* 滚动条里面轨道 */
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>